<template>
	<div class="bookDteail">
		<div class="header">
			<router-link to="/mobile/home" class="rou"><</router-link>
			书籍详情
		</div>
		<hr>
		<div class="dtail1">
			<span>{{book.name}}</span>
			<aside class="box1">
				<p>月销售量:999+</p>
				<button @click="addCart()"><i class="el-icon-shopping-cart-2"></i></button>
				<button><i class="el-icon-star-off"></i></button>
			</aside>
		</div>
		<div class="tab">
			<table>
				<tr>
					<td>书本序号:</td>
					<td>{{new Date(book.tmake).getTime()}}</td>
				</tr>
				<tr>
					<td>作者:</td>
					<td>{{book.author}}</td>
				</tr>
				<tr>
					<td>出版社:</td>
					<td>{{book.maker}}</td>
				</tr>
				<tr>
					<td>出版时间:</td>
					<td>{{new Date(book.tmake).getFullYear()}}</td>
				</tr>
			</table>
		</div>
		<div class="show">
			<aside>
				<img :src="`${$ip}/api/public/showimg/${book.pic}`" >
			</aside>
				<button>立即购买</button>
		</div>
		<div class="div2">
			<aside>
				<details>
					<summary>书籍简介</summary>
					<p>{{book.info}}</p>
				</details>
			</aside>
		</div>
		<div class="div3">
			<textarea v-model="txt" placeholder="请输入你的评论"></textarea>
			<div class="div4">
				<el-rate
				    v-model="value2"
				    :colors="colors">
				  </el-rate>
			    <button @click="AddRate()">评论<i class="el-icon-edit"></i></button>
			</div>	
		</div>
		<div class="comment">
			<ul v-for="(item,i) in comments">
				<li>
					<aside class="conent">
						<img src="../../assets/img/mobile/user-logo-004.png" class="img1">
						<span>{{item.nickname}}</span>
						<img src="../../assets/img/mobile/点赞.png" class="img2">
						
					</aside>
					<p>{{item.content}}</p>
						<span class="p1">{{find(item.tpost)}}</span>
						<el-rate
						  v-model="item.rate"
						  disabled
						  show-score
						  text-color="#ff9900"
						  score-template="{value}">
						</el-rate>
				</li>
			</ul>
			<button>更多评论</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'MoblieBookDetall',
		data(){
			return{
				book:{},
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				txt:'',
				value2:0,
				value:0,
				comments:[],
				total:0,
				pagenum:1,
				lines:6,
			}
		},
		computed:{
			find(){
				return(val)=>{
					let y = new Date(val).getFullYear();
					let m = new Date(val).getMonth();
					let d = new Date(val).getDate();
					return `${y}-${m}-${d}`;
				}
			}
		},
		methods:{
			addCart(){
				this.findBook();
				let num = this.book.stock-this.book.salenum;
				if(num == 0){
					this.$message({
						message:'库存不足',
						type:'error'
					});
					return;
				}
				this.$get('/api/public/addCart/'+this.$route.params.bookid).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					
				})
			},
			AddRate(){
				this.$postkv('/api/public/rate/add/'+this.$route.params.bookid,
				{content:this.txt,rate:this.value2}).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					this.findComment();
					this.txt = '';
				})
			},
			findComment(){
				this.$get('/api/public/rate/findByBookid/'+this.$route.params.bookid+'/'+this.pagenum+'/'+this.lines)
				.then((resp)=>{
					console.log(resp.data.data);
					this.comments = resp.data.data.comments;
					this.total = resp.data.data.total;
					this.value2 = resp.data.data.rate;
				})
			},
			findBook(){
				this.$get('/api/public/book/findById/'+this.$route.params.bookid).then((resp)=>{
					this.book =resp.data.data; 
					console.log(this.book);
			   })
			}
		},
		mounted() {
			console.log(this.$route.params.bookid);
			this.findBook();
			this.txt='';
			this.value2=0;
			this.findComment();
		}
	}
</script>

<style scoped>
.bookDteail{
	width: 100%;
	background-color: rgba(152, 152, 114, 0.5);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
}
.bookDteail .header{
	height: 3.125rem;
	display: flex;
	align-items: center;
	line-height: 3.125rem;
	color: white;
}
.bookDteail .header .rou{
	font-size: 1.5rem;
	margin-left: 1.25rem;
	color: white;
	margin-right: 8rem;
}
.bookDteail .dtail1{
	width: 95%;
	margin: 0 auto;
	height: 6.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bookDteail .dtail1 span{
	width: 40%;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	color: white;
	font-size: 1.25rem;
	
}
.bookDteail .dtail1 .box1{
	width: 60%;
	text-align: right;
}
.bookDteail .dtail1 .box1 p{
	color: white;
	font-size: 1rem;
}
.bookDteail .dtail1 .box1 button{
	margin-top: 0.625rem;
	color: orange;
	font-size: 1.5rem;
	height: 1.875rem;
	width: 3.125rem;
	background-color: rgba(203, 203, 184, 1.0);
	border: none;
}
.bookDteail .dtail1 .box1 button a{
	color: orange;
}
.bookDteail .tab{
	width: 100%;
	margin-bottom: 1.25rem;
}
.bookDteail .tab table{
	width: 95%;
	margin: 0 auto;
	color: white;
}
.bookDteail .tab table tr{
	line-height: 1.5rem;
}
.bookDteail .tab table td:nth-child(1){
	width: 20%;
}
.bookDteail .tab table td:nth-child(2){
	width: 80%;
}
.bookDteail .show{
	width: 100%;
	height: 14rem;
	text-align: center;
}
.bookDteail .show aside{
	width: 100%;
	height: 80%;
}
.bookDteail .show img{
	height: 100%;
	width: 35%;
}
.bookDteail .show button{
	background-color: rgba(203, 203, 184, 1.0);
	color: white;
	border: none;
	outline: none;
	width: 5rem;
	height: 2.5rem;
}
.bookDteail .div2{
	width: 95%;
	margin: 0 auto;
}
.bookDteail .div2 summary{
	outline: none;
	color: white;
}
.bookDteail .div2 p{
	text-indent: 1.5rem;
	color: white;
}
.bookDteail .div3{
	width: 80%;
	margin:  1.25rem auto;
	margin-bottom: 3rem;
}
.bookDteail .div3 textarea{
	width: 100%;
	height: 2rem;
	border-radius: 0.5rem;
	text-indent: 0.9375rem;
	outline: none;
}
.bookDteail .div3 .div4{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bookDteail .div3 .div4 button{
	background-color: deepskyblue;
	height: 2.5rem;
	width: 4.375rem;
	border-radius: 0.5rem;
	border: none;
	
}
.bookDteail .div3 .div4  el-rate{
	color: #23262E;
}
.bookDteail .comment {
	position: relative;
	bottom: 2.5rem;
}
.bookDteail .comment .conent{
	width: 100%;
	display: flex;
}
.bookDteail .comment{
	width: 95%;
	margin: 0.625rem auto;
	position: relative;
}
.bookDteail .comment .el-rate{
	position: absolute;
	right: 0;
	top: 5rem;
}
.bookDteail .comment ul{
	margin-top: 0.625rem;
	border-bottom: 0.0625rem gray solid;
}
.bookDteail .comment ul li{
	width: 100%;
	height: rem;
}
.bookDteail .comment ul li .img2{
	width: 20px;
	height: 20px;
	margin-left: 40%;
	margin-top: 0.625rem;
}
.bookDteail .comment ul li .img1{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: 0.625rem;
	margin-right: 0.625rem;
}
.bookDteail .comment ul li span{
	width: 30%;
	margin-top: 0.625rem;
	font-size: 0.8rem;
}
.bookDteail .comment ul li p{
	width: 95%;
	margin: 0.625rem auto;
	color: black;
	overflow-wrap: break-word;
}
.bookDteail .comment ul li .p1{
	font-size: 0.8rem;
}
.bookDteail .comment button{
	display: flex;
	color: white;
	background-color: #cbcbb8;
	border: none;
	margin: 0.5rem auto;
	outline: none;
}

</style>
